<template>
    <div class="home">
        <div class="content_box">
            <div class="box1">
                <dv-border-box-1>
                    <h1 class="title1">语文成绩分布</h1>
                    <dv-active-ring-chart :config="config" style="width:100%;height:100%" />
                </dv-border-box-1>
            </div>
            <div class="box2">
                <dv-border-box-8>dv-border-box-8</dv-border-box-8>
            </div>
            <div class="box3">
                <dv-border-box-9>dv-border-box-9</dv-border-box-9>
            </div>
            <div class="box4">
                <dv-border-box-10>dv-border-box-10</dv-border-box-10>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            config: {
                
                data: [
                    {
                        name: '不及格',
                        value: 3
                    },
                    {
                        name: '60-70',
                        value: 2
                    },
                    {
                        name: '70-80',
                        value: 2
                    },
                    {
                        name: '80-90',
                        value: 4
                    },
                    {
                        name: '90-100',
                        value: 1
                    }
                ],
                lineWidth: 30,
                
            }
        }
    }
}
</script>

<style>
.home{
    height: 1300px;
    background: url(../assets/login.jpeg);
}
.content_box{
    width: 100%;
    height: 1100px;
    
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
}
.title1{
    position: relative;
    left: 400px;
    top: 50px;
    font-size: 30px;
    color: brown;
}
</style>